import React, { useState, useEffect } from 'react'
import { Select, Input, Button, Form, Modal, InputNumber, Radio, message } from 'antd'
import UploadImg from '../../../components/UploadImg'
import api from '../../../api/activityManage'

const { Option } = Select
const { TextArea } = Input

const EditGiftModal = ({actId,editModal,showModal,form}) => {
    const [state, setState] = useState({
		giftTypeArr:[//奖品类型数组
			{id:1,name:'实物奖品'},
			// {id:2,name:'虚拟奖品'}
		],
		btnLoading:false,//按钮loading
		fileList:[],//格式：{uid: '-1',name: 'image.png',status: 'done',url:''}
		goodUrl:'',//图片
	});

    //更新state
    const updateState = (newState) => {
        let data = JSON.parse(JSON.stringify(state))
        setState(Object.assign({}, data, newState))
	}
	//显示的时候初始化
	useEffect(()=>{
		if(editModal.visible){
			updateState({
				fileList:editModal.data.id?[{uid: '-1',status: 'done',url:editModal.data.goodUrl}]:[]
			})
		}
	},[editModal.visible])
    // 监听图片文件
    const onChangeImg = (fileList) => {
		console.log(fileList)
		updateState({
			fileList:fileList,
			goodUrl:fileList.length > 0 ? fileList[0].url : ""
		})
		//设置表单值
		form.setFieldsValue({
			goodUrl: fileList.length > 0 ? fileList[0].url : "",
		});
	}

    const handleSubmit = (e) => {
        e.preventDefault();
        form.validateFields((err, values) => {
			if (!err) {
				updateState({btnLoading:true})
				let obj = Object.assign({},{actId:actId},values)
				if(editModal.data.id){//编辑
					obj.id = editModal.data.id
				}
				api.addActivitiesGoods(obj,(res)=>{
					if(res){
						closeModal(4,{})
						message.success(obj.id?'编辑成功':'新建成功')
					}
					updateState({btnLoading:false})
				})
            }
        });
    }
    //关闭模态框
    const closeModal = (type)=>{
		showModal(type,{})
		form.resetFields()
		updateState({fileList:[]})
	}
	
    const { getFieldDecorator } = form;
    return (
            <Modal title={editModal.title}
				visible={editModal.visible}
				footer={null}
				onCancel={()=>{closeModal(3)}}
			>
                <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} onSubmit={handleSubmit}>
					<Form.Item label="奖品名称">
						{getFieldDecorator('name', {
							initialValue:editModal.data.name,
							rules: [{ required: true, message: '请输入奖品名称' }],
						})(
							<Input style={{ width: 200 }} maxLength={15} />,
						)}
					</Form.Item>
					<Form.Item label="奖品图片">
						{getFieldDecorator('goodUrl', {
							initialValue: editModal.data.goodUrl,
							rules: [{required: true,message: '请上传奖品图片',},]
						})(
							<UploadImg onChangeImg={onChangeImg} fileList={state.fileList} />
						)}
					</Form.Item>
					<Form.Item label="奖品描述">
						{getFieldDecorator('memo', {
							initialValue:editModal.data.memo,
							rules: [{ required: true, message: '请输入奖品描述' }],
						})(
							<TextArea rows={4} maxLength={200} />,
						)}
					</Form.Item>
					<Form.Item label="兑换积分">
						{getFieldDecorator('points', {
							initialValue:editModal.data.points,
							rules: [{ required: true, message: '请输入兑换积分' }],
						})(
							<InputNumber style={{ width: 200 }} max={99999999} min={1} precision={0} />
						)}
					</Form.Item>
					<Form.Item label="奖品类型">
						{getFieldDecorator('type', {
							initialValue:editModal.data.type,
							rules: [{ required: true, message: '请选择奖品类型' }],
						})(
							<Select style={{ width: 200 }}>
								{state.giftTypeArr.map((v,i)=>{
									return (
										<Option key={i} value={v.id}>{v.name}</Option>
									)
								})}
							</Select>
						)}
					</Form.Item>
					<Form.Item label="库存">
						{getFieldDecorator('store', {
							initialValue:editModal.data.store,
							rules: [{ required: true, message: '请输入库存' }],
						})(
							<InputNumber style={{ width: 200 }} max={99999999} min={1} precision={0} />
						)}
					</Form.Item>
					<Form.Item label="权重">
						{getFieldDecorator('weight', {
							initialValue:editModal.data.weight,
							rules: [{ required: true, message: '请输入权重' }],
						})(
							<InputNumber style={{ width: 200 }} max={999} min={1} precision={0} />
						)}
					</Form.Item>
					<Form.Item label="状态">
						{getFieldDecorator('state', {
							initialValue:editModal.data.state,
							rules: [{ required: true, message: '请选择状态' }],
						})(
							<Radio.Group>
								<Radio value={1}>有效</Radio>
								<Radio value={0}>无效</Radio>
							</Radio.Group>
						)}
					</Form.Item>
					<Form.Item wrapperCol={{ span: 24 }} style={{textAlign:'right'}}>
						<Button onClick={()=>{closeModal(3)}}>取消</Button>
						<Button style={{marginLeft:30}} type="primary" htmlType="submit" loading={state.btnLoading}>保存</Button>
					</Form.Item>
                </Form>
            </Modal>
    )
}

export default Form.create({})(EditGiftModal)